<template>
  <view class="container">
    <view class="border">
      <view class="container-title">
        <image mode="heightFix" :src="image_hosts+'/img_test_dati@2x.png'"></image>
      </view>
      <scroll-view class="content" scroll-y :scroll-top="scrollTop" scroll-with-animation >
        <view class="answer-item">
          <view class="answer-title">
            <text class="answer-icon"></text>
            <text>{{playingQuestionList[playingQuestionIndex].question}}</text>
          </view>
          <view :class="answerIndex===index?'subject-item-hover':''" class="subject-item" v-for="(item,index) in playingQuestionList[playingQuestionIndex].answers" @click="setIndex(index)">
            <text>{{item}}</text>
          </view>
          <view class="zhanwei" style="width: 100%;height: 120rpx;"></view>
        </view>
      </scroll-view>
      <view v-if="answerIndex!==''" class="button" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
export default {
  props:['playingQuestionList','playingQuestionIndex','videoInfo'],
  data() {
    return {
      image_hosts:this.image_host+'videoAnswer',
      answerIndex:'',
      scrollTop:0,
      contentObj:'',
      zhanweiObj:'',
      top:''
    };
  },
  created()
  {
    this.answerIndex=uni.getStorageSync('videoAnswer:'+this.videoInfo.id+'-'+this.playingQuestionIndex)
    if(!this.contentObj){
      this.getTop()
    }
  },
  methods:{
    getTop()
    {
      let _this=this
      return new Promise((resolve, reject)=>{
        const query = uni.createSelectorQuery().in(this);
        query.select('.content').boundingClientRect((data)=>{
          _this.contentObj=data
          query.select('.zhanwei').boundingClientRect((data) => {
            _this.zhanweiObj=data
            if(!_this.top){
              _this.top=_this.zhanweiObj.top-_this.contentObj.top
            }
            resolve(true)
          }).exec();
        }).exec()
      })
    },
    async setIndex(index){
      this.answerIndex=index
      console.log((this.contentObj.height-50),this.top)
      if((this.contentObj.height-50)<this.top){
        this.scrollTop=index*50
      }

    },
    submit()
    {
      this.$emit('hideAnswerSubjectInProgress',this.answerIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
@function tovmin($rpx){//$rpx为需要转换的字号
  @return #{$rpx * 100 / 750}vmin;
}
.container{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.border{
  box-sizing: border-box;
  position: relative;
  padding: tovmin(20);
  border-radius: tovmin(40);
  background-image: radial-gradient(circle at top center, #D4F0E1, #8AE653, #24B363, #50C282,#D4F0E1);
}
.content{
  width: tovmin(630);
  background-color: #fff;
  box-sizing: border-box;
  border-radius: tovmin(40);
  padding: 0 tovmin(22);
  height: tovmin(790);
  overflow: auto;
  padding-bottom: tovmin(20);
}
.answer-item{
  margin-top: tovmin(50);
}
.container-title{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0%);
  background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/img_test_dati@2x.png);
  background-size: 100% 100%;
  width: tovmin(220);
  height: tovmin(60);
  border-radius: 0 0 tovmin(26) tovmin(26);
  font-size: tovmin(28);
  color: #24B363;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  image{
    width: tovmin(220);
    height: tovmin(60);
  }
}
.answer-title{
  width: 100%;
  font-size: tovmin(38);
  color: #333333;
  font-weight: 600;
  margin-bottom: tovmin(24);
  .answer-icon{
    display: inline-block;
    width: tovmin(10);
    height: tovmin(20);
    background-color: #24B364;
    border-radius: tovmin(4);
    margin-right: tovmin(20);
  }
}
.subject-item{
  width: 100%;
  background-color: #fff;
  border-radius: tovmin(16);
  font-size: tovmin(36);
  color: #333333;
  font-weight: 400;
  box-sizing: border-box;
  padding: tovmin(20);
  margin-bottom: tovmin(24);
  border: tovmin(2) solid #9DBEAC;
}
.button{
  position: absolute;
  bottom: tovmin(42);
  left: 50%;
  transform: translate(-50%,0%);
  width: 90%;
  height: tovmin(98);
  line-height: tovmin(98);
  text-align: center;
  font-size: tovmin(42);
  color: #fff;
  font-weight: 600;
  background: linear-gradient(180deg, #52E883 0%, #04AA3B 100%);
  box-shadow: 0 tovmin(4) tovmin(10) 0 rgba(0,67,29,0.4), inset 0 tovmin(5) tovmin(5) 0 #5AFF6A;
  border-radius: tovmin(45);
}
@media screen and (orientation:landscape){
  .content{
    width: tovmin(912);
    height: tovmin(650);
  }
}
.subject-item-hover{
  border:tovmin(2) solid #9DBEAC;
  background-color: #ECF6F0;
  color: #24B363;
}
</style>
